<template>
    <div class="list-page">
        <tool-bar nav="" title="工作流任务">
            <el-button @click="add_click()">添加</el-button>
        </tool-bar>
        <my-list
            ref="list"
            :url='wf_host + "/wf-instance/taskAll"'
            @param="preload"
            @loaded="procData"
            :page-size="10"
            :store="true"
        >

            <el-table-column prop="processInstanceId" label="实例id" align="center"
            ></el-table-column>
            <el-table-column prop="assigneeName" label="执行人" align="center"
            ></el-table-column>
            <el-table-column prop="taskName" label="任务名称" align="center"
            ></el-table-column>
            <!--            <el-table-column prop="nodeName" label="当前节点" align="center"
                        ></el-table-column>-->
            <el-table-column prop="deployName" label="工作流名称" align="center"
            ></el-table-column>
            <el-table-column prop="date" label="任务执行时间" align="center"
            ></el-table-column>
            <el-table-column prop="result" label="执行结果" align="center"
            ></el-table-column>

            <el-table-column label="操作" align="center" width="240">
                <template v-slot="scope">
                    <el-button @click="visa(scope.row)" type="primary" size="small" round
                               v-if="scope.row.assigneeName == loginName">
                        审批
                    </el-button>
                    <el-button type="warning" plain round @click="delete_click(scope.row)" size="small">删除</el-button>
                    <el-button type="success" size="small" round @click="view(scope.row)">流程图</el-button>
                    <el-button type="primary" size="small" round @click="taskDetails(scope.row)">详情</el-button>

                    <el-drawer
                        title="流程详细信息"
                        v-model="taskDetail"
                        direction="rtl"
                        size="50%">
                        <el-table :data="taskdData">
                            <el-table-column property="deployId" label="部署id"></el-table-column>
                            <el-table-column property="processInstanceId" label="实例id"></el-table-column>
                            <el-table-column property="step" label="步骤"></el-table-column>
                            <el-table-column property="processInstanceName" label="实例名称"></el-table-column>
                            <el-table-column property="createBy" label="姓名"></el-table-column>
                            <el-table-column property="createAt" label="日期"></el-table-column>
                            <el-table-column property="result" label="审批结果"></el-table-column>
                            <el-table-column property="remark" label="审批意见"></el-table-column>
                        </el-table>
                    </el-drawer>

                    <el-dialog
                        title="请您签批审核"
                        v-model="dialogVisa"
                        width="30%"
                    >

                        <template #footer>
                            <span class="dialog-footer">
                            <el-button @click="pass(scope.row)" type="success">审 核 通 过</el-button>
                            <el-button @click="rebut(scope.row)" type="danger">驳 回</el-button>
                            </span>
                        </template>
                    </el-dialog>

                    <el-dialog
                        title="流程图"
                        v-model="dialogVisible"
                        width="80%"
                    >
                        <img :src="codeImg"/>

                        <template #footer>
                        <span  class="dialog-footer">
                    <el-button @click="dialogVisible = false" type="primary">确 定</el-button>
                    </span>
                        </template>
                    </el-dialog>
                </template>
            </el-table-column>
            <template #query="scope">
                <kv label="执行人">
                    <el-input v-model="scope.query.name"></el-input>
                </kv>
            </template>
        </my-list>
    </div>
</template>

<script setup>
/**
 * Created by CodeGenerator at 2021-03-15 10:31:23
 */





//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive( {
    taskDetail: false,
    taskdData: [],
    row: "",
    dialogVisible: false,
    codeImg: "",
    dialogVisa: false,
    loginName: "",
    wf_host: window.VUE_APP_SERVER_HOST_ACTIVITI,
});


const $props = defineProps({

});





const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);



const preload = function(param) {
    param.pageNo = param.pageNumber;
    param.pageSize = param.take;
    param.query = {
        name: param.name
    };
//添加查询参数，修改分页参数等。
//param.type = jv.$route.params.type
};
const procData = function(res) {
    res.data.data.forEach(it => {
//如果是组合实体，设置 it.id=...
        it.roles_res = (it.roles || []).map(it => it.name).join(",")
    });
};
const loadData = function(pageNumber) {
    list.value.loadData(pageNumber);
};
const add_click = function() {
    jv.$router.push("/demo/activiti/add")
};
const edit_click = function(row) {
//记录上次点击行
    var rowId = row.id;
    list.value.setLastRow(row);
    jv.$router.push("/demo/activiti/edit/" + rowId)
};
const delete_click = function(row) {
    var rowId = row.processInstanceId;
    jv.confirm('确认删除吗？').then(res => {
        jv.$http.post($data.wf_host + "/wf-instance/delete?id=" + rowId).then(res => {
//[axios拦截器中已处理了异常]。
            loadData();
        })
    });
};
const submit = function(row) {
    if (row.assigneeName == $data.loginName) {
        jv.$http.post($data.wf_host + "/wf-instance/exec?id=" + row.processInstanceId);
        this.$notify({
            title: "执行成功",
            type: "success"
        });
        loadData();
    } else {
        this.$notify({
            title: "您没有权限提交",
            type: "error"
        });
    }
};
const visa = function(row) {
    $data.row = row;
    $data.dialogVisa = true
};
const pass = function(row) {
    jv.$http.post($data.wf_host + "/wf-instance/exec?id=" + $data.row.processInstanceId + "&result=1" + "&processInstanceName=" + row.taskName + "&loginName=" + jv.me.user.loginName);
    this.$notify({
        title: "执行成功",
        type: "success"
    })
    $data.dialogVisa = false
};
const rebut = function(row) {
    jv.prompt("请输入驳回原因", "驳回意见").then(remark => {
        jv.$http.post($data.wf_host + "/wf-instance/exec?id=" + $data.row.processInstanceId + "&result=0" + "&remark=" + remark.value + "&processInstanceName=" + row.taskName + "&loginName=" + jv.me.user.loginName);
        this.$notify({
            title: "执行成功",
            type: "success"
        });
        $data.dialogVisa = false
    });
};
const view = function(row) {
    jv.$http.post($data.wf_host + "/wf-instance/watchimage?processInstanceId=" + row.processInstanceId).then(res => {
        $data.dialogVisible = true;
        $data.codeImg = 'data:image/png;base64,' + res.data;
    })
};
const taskDetails = function(row) {
    jv.$http.post($data.wf_host + "/wf-instance/hiActivitiDetail?processInstanceId=" + row.processInstanceId).then(res => {
        $data.taskdData = res.data.data;
        $data.taskDetail = true
    })
};

onMounted( function() {
    $data.loginName = jv.me.user.loginName
} )



</script>
